/**
 * 订单管理
 */
<template>
  <div>
    <!-- 面包屑导航 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>订单管理</el-breadcrumb-item>
      <el-breadcrumb-item>订单管理</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 搜索筛选 -->
    <el-form :inline="true" :model="pagination1" class="user-search">
      <el-form-item >
        <el-input size="medium" v-model="pagination1.orderNo" placeholder="订单编号"></el-input>
      </el-form-item>
      <el-form-item>
        <el-input size="medium" v-model="pagination1.licName" placeholder="车牌号码"></el-input>
      </el-form-item>
      <el-form-item>
        <el-input size="medium" v-model="pagination1.secName" placeholder="路段名称"></el-input>
      </el-form-item>
      <el-form-item>
        <el-input size="medium" v-model="pagination1.pkno" placeholder="泊位编号"></el-input>
      </el-form-item>
      <el-form-item>
        <el-date-picker v-model="pagination1.daterange" type="daterange" 
        range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"
        value-format="yyyy-MM-dd">
        </el-date-picker>
      </el-form-item>
      <el-form-item>
          <el-select v-model="pagination1.orderStatus" clearable placeholder="请选择">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
      </el-form-item>
      <el-form-item>
        <el-button size="medium" type="primary" icon="el-icon-search" @click="selAllOrSelByLike">搜索</el-button>
        <el-button type="success" size="medium" icon="el-icon-document" @click = "exportExcel">导出Excel</el-button>
      </el-form-item>
    </el-form>
    
    <!--列表-->
    <el-table  size="small" :data="orderItemList" highlight-current-row v-loading="loading" border element-loading-text="拼命加载中" style="width: 100%;">
      <el-table-column align="center" type="index" width="60">
      </el-table-column>
      <el-table-column  prop="orderNo" label="订单编号" width="260" show-overflow-tooltip>
      </el-table-column>
      <el-table-column  prop="commitTime" label="提交时间" width="140" show-overflow-tooltip>
      </el-table-column>
      <el-table-column  prop="licName" label="车牌号码" width="110" show-overflow-tooltip>
      </el-table-column>
      <el-table-column  prop="secName" label="所属路段" width="90" show-overflow-tooltip>
      </el-table-column>
      <el-table-column  prop="pkno" label="泊位编号" width="80" show-overflow-tooltip>
      </el-table-column>
      <el-table-column  prop="insName" label="巡检员" width="80" show-overflow-tooltip>
      </el-table-column>
      <el-table-column  prop="orderMoney" label="订单金额" width="80" show-overflow-tooltip>
        <template slot-scope="scope">
            <span>¥{{format(scope.row.orderMoney)}}</span>
        </template>
      </el-table-column>
      <el-table-column  prop="orderStatus" label="订单状态" width="80" show-overflow-tooltip>
        <template slot-scope="scope">
          <span v-if="scope.row.orderStatus == 0">已支付</span>
          <span v-if="scope.row.orderStatus == 1">未支付</span>
          <span v-if="scope.row.orderStatus == 2">未确认</span>
          <span v-if="scope.row.orderStatus == 3">进行中</span>
          <span v-if="scope.row.orderStatus == 4">申诉中</span>
          <span v-if="scope.row.orderStatus == 5">已退款</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="操作" min-width="100">
        <template slot-scope="scope">
          <el-button size="mini" @click="handleEdit(scope.row.orderNo)" type="primary">订单详情</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
     <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="pagination1.currentPage"
      :page-sizes="pagination2.pageSizes"
      :page-size="pagination1.pageSize"
      background
      layout="total, sizes, prev, pager, next, jumper"
      :total="pagination2.total">
    </el-pagination>
  </div>
</template>

<script>
export default {
  data() {
    return {
      options:[
        {
          value:"0",
          label:"已支付"
        },{
          value:"1",
          label:"未支付"
        },{
          value:"2",
          label:"未确认"
        },{
          value:"3",
          label:"进行中"
        },{
          value:"4",
          label:"申诉中"
        },{
          value:"5",
          label:"已退款"
        }
      ],
      orderItemList:[],
      loading: false, //是显示加载
      formInline:{},
      pagination1:{
        pageSize:5,
        currentPage:1,
        orderNo:"",
        licName:"",
        secName:"",
        pkno:"",
        daterange:[],
        orderStatus:""
      },
      pagination2:{
        total:0,
        pageSizes:[5,10,20,50,100]
      }
    }
  },
  methods: {
    selAllOrSelByLike() {
      this.$axios.post("/orderItems/selectOrderRecord",this.pagination1)
      .then(res=>{
        this.orderItemList = res.data.data.orderItemList;
        this.pagination2.total = res.data.data.total;
      })
      .catch(error=>{
        console.log(error.data);
      })
    },
    handleSizeChange(val){
      this.pagination1.pageSize = val;
      this.pagination1.currentPage = 1;
      this.selAllOrSelByLike();
    },
    handleCurrentChange(val){
      this.pagination1.currentPage = val;
      this.selAllOrSelByLike();
    },
    handleEdit(orderNo){
      this.$router.push({name:'订单管理中的订单详情',query:{orderNo:orderNo}});
    },
    exportExcel(){
      this.$axios
        .post("orderItems/exportExcel", this.pagination1,{responseType: 'blob'})
        .then((res) => {
          let fileName = res.headers["content-disposition"].split("=")[1];//得到后端生成的文件名          
          let url = window.URL.createObjectURL(new Blob([res.data]));
          let dom = document.createElement("a");
          dom.style.display = "none";
          dom.href = url;
          dom.setAttribute("download", fileName); //指定下载后的文件名，防跳转
          document.body.appendChild(dom);
          dom.click();
          // 释放内存
          dom.parentNode.removeChild(dom)
          window.URL.revokeObjectURL(dom.href);
        })
        .catch(function (error) {
          console.log(error);
        });
    },
    format(val){
        let realVal = parseFloat(val).toFixed(2);
        return realVal;
    }
    
  },  
  created(){
    this.selAllOrSelByLike();
  }

 
}
</script>

<style scoped>
.user-search {
  margin-top: 20px;
}

.userRole {
  width: 100%;
}
</style>

 
 

 